<!DOCTYPE html>
<html lang="zh-en">
<head>
    <meta charset="UTF-8">
    <title>React 组件化设计模式</title>
</head>
<!-- http://huziketang.mangojuice.top/books/react/lesson2 -->

<!--<body>
<div class="wrap">
    <button class="btn">
        <span class="btn-txt">点赞</span>
        <span>👍</span>
    </button>
</div>
<script>
    var eBtn = document.querySelector('.btn')
    var eBtnTxt = document.querySelector('.btn-txt')

    var is_liked = false
    eBtn.addEventListener('click', function () {
        is_liked = !is_liked
        if (is_liked) {
            eBtnTxt.innerHTML = "取消"
        } else {
            eBtnTxt.innerHTML = "点赞"
        }
    }, false)
</script>
</body>-->

<!--<body>
<div class="wrap"></div>

<script>
    class LikeBtn {
        render() {
            return `
                <button class="btn">
                    <span class="btn-txt">点赞</span>
                    <span>👍</span>
                </button>
            `
        }
    }

    var eWrap = document.querySelector('.wrap')
    var btn1 = new LikeBtn()
    eWrap.innerHTML += btn1.render()

    var btn2 = new LikeBtn()
    eWrap.innerHTML += btn2.render()
</script>
</body>-->

<body>
<div class="wrap"></div>

<script>
    const createDom = (domString) => {
        let cDiv = document.createElement('div')
        cDiv.innerHTML = domString
        return cDiv
    }

    class LikeBtn {
        constructor () {
            this.state = {
                is_liked: false
            }
        }

        changeBtnTxt() {
            let eBtnTxt = this.el.querySelector('.btn-txt')
            this.state.is_liked = !this.state.is_liked
            eBtnTxt.innerHTML = this.state.is_liked? '取消':'确定'
        }
        render () {
            this.el = createDom(`
                <button class="btn">
                    <span class="btn-txt">点赞</span>
                    <span>👍</span>
                </button>`)

            this.el.addEventListener('click', this.changeBtnTxt.bind(this), false)

            return this.el
        }
    }

    var eWrap = document.querySelector('.wrap')
    var btn1 = new LikeBtn()
    eWrap.appendChild(btn1.render())

    var btn2 = new LikeBtn()
    eWrap.appendChild(btn2.render())



</script>
</body>

</html>